<template>
  <div id="userUpdate">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <!-- 用户名、密码-->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password"></el-input>

      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>

      <!-- 性别 -->
      <!-- TODO 性别是传单词还是传数字应与后端保持同步 -->
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择人员性别" @change="$forceUpdate()">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
          <el-option label="保密" value="secret"></el-option>
        </el-select>
      </el-form-item>

      <!-- 手机号、邮箱、身份证号、角色 -->
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>

      <el-form-item label="身份证号" prop="idNum">
        <el-input v-model="ruleForm.idNum"></el-input>
      </el-form-item>

      <!-- 0 系统管理员
           1 岗位操作人员
           2 技术管理人员 -->
      <!--TODO 角色ID应与后端对应-->
      <el-form-item label="人员角色" prop="roleId">
        <el-checkbox-group v-model="ruleForm.roleId">
          <el-checkbox label="0" name="type" value="0">系统管理员</el-checkbox>
          <el-checkbox label="1" name="type" value="1">岗位操作人员</el-checkbox>
          <el-checkbox label="2" name="type" value="2">技术管理人员</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: '',
        password: '',
        checkPass: '',
        sex: '',
        phoneNumber:'',
        email:'',
        idNum:'',
        roleId:''
      },

      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {required: true, message: '请确认您的密码', trigger: 'blur'},
          {validator: validatePass2, trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择人员性别', trigger: 'change'}
        ],
        phoneNumber:[
          {required: true, message: '请输入手机号', trigger: 'blur'}
        ],
        email:[
          {required: true, message: '请输入邮箱号', trigger: 'blur'}
        ],
        idNum:[
          {required: true, message: '请输入身份证号', trigger: 'blur'}
        ],
        roleId:[
          {required: true, message: '请勾选人员角色', trigger: 'blur'}
        ]
      }
    };
  },
  created(){
    const _this = this
    axios.get('/user/findById/'+this.$route.query.userId).then(function(resp){
      _this.ruleForm = resp.data
    })
  },
  methods: {
    submitForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.put('/user/update',this.ruleForm).then(function(resp){
            if(resp.data=='success'){
              _this.$alert("人员："+_this.ruleForm.name+" 修改成功！", '修改成功', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/userList')
                }
              });
            }
          })
        } else {
          console.log(this.ruleForm)
          _this.$alert("修改失败！", '修改失败', {
            confirmButtonText: '确定',
            callback: action => {
              _this.$router.push('/userUpdate')
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }


}
</script>

<style scoped>
.el-form{
  width: 50%;
}
</style>